import Phaser from 'phaser';

import UtilsLoader from '../../../utils/Utils.loader/UtilsLoader';
import UtilsCoordinateConter from '../../../utils/Utils.coordinate.conter/UtilsCoordinateConter';
import SaveSceneExampleQueue from '../../../utils/Utils.SaveSceneExampleQueue/UtilsSaveSceneExampleQueue';

export default class SceneUiSkill extends Phaser.Scene {
    constructor() {
        super({
            key: 'SceneUiSkill'
        });

        this.knap = null;
        this.att = null;
        this.attCD = null;
        this.mag = null;
        this.ret = null;
        this.retCD = null;
        this.task = null;
        this.taskVis = false;
        this.attCDVis = false;
        this.attVis = true;
        this.retVis = true;
        this.retCDVis = false;
        this.enchant = null;
        this.enchantVis = true;

        this.WWC = UtilsCoordinateConter.coordinatrConter('world').WWC;
        this.WHC = UtilsCoordinateConter.coordinatrConter('world').WHC;
        this.WFW = UtilsCoordinateConter.coordinatrConter('worldFull').WFW;
        this.WFH = UtilsCoordinateConter.coordinatrConter('worldFull').WFH;
        this.VWC = UtilsCoordinateConter.coordinatrConter('view').VWC;
        this.VHC = UtilsCoordinateConter.coordinatrConter('view').VHC;
        this.VFW = UtilsCoordinateConter.coordinatrConter('viewFull').VFW;
        this.VFH = UtilsCoordinateConter.coordinatrConter('viewFull').VFH;
    }

    init() {
        console.log('SceneUiSkill init!');

        SaveSceneExampleQueue.enQueue({
            'SceneUiSkill': this
        });
    }

    preload() {
        console.log('SceneUiSkill pre!');

        this.IMAGE_LOAD();
    }

    create() {
        console.log('SceneUiSkill create!');

        this.task = this.add.image(this.VFW - 46, this.VFH - 469, 'taskIcon')
        .setInteractive()
        .setVisible(this.taskVis);
        this.enchant = this.add.image(this.VFW - 46, this.VFH - 404, 'enchantIcon')
        .setInteractive()
        .setVisible(this.enchantVis);
        this.knap = this.add.image(this.VFW - 36, this.VFH - 32, 'knapsackIcon')
        .setInteractive();
        this.att = this.add.image(this.VFW - 46, this.VFH - 164, 'attackIcon')
        .setVisible(this.attVis)
        .setInteractive();
        this.attCD = this.add.image(this.VFW - 46, this.VFH - 164, 'attackIconCD')
        .setVisible(this.attCDVis)
        .setInteractive();
        this.mag = this.add.image(this.VFW - 46, this.VFH - 244, 'magicIcon')
        .setInteractive();
        this.ret = this.add.image(this.VFW - 46, this.VFH - 324, 'returnIcon')
        .setVisible(this.retVis)
        .setInteractive();
        this.retCD = this.add.image(this.VFW - 46, this.VFH - 324, 'returnIconCD')
        .setVisible(this.retCDVis)
        .setInteractive();

        this.onClick();

    }

    IMAGE_LOAD() {
        new UtilsLoader('image', [{
            key: 'knapsackIcon',
            path: '/images/phaser/knapsackIcon.png'
        }, {
            key: 'attackIcon',
            path: '/images/phaser/attackIcon.png'
        }, {
            key: 'magicIcon',
            path: '/images/phaser/magicIcon.png'
        }, {
            key: 'returnIcon',
            path: '/images/phaser/returnIcon.png'
        }, {
            key: 'returnIconCD',
            path: '/images/phaser/returnIconCD.png'
        }, {
            key: 'attackIconCD',
            path: '/images/phaser/attackIconCD.png'
        }, {
            key: 'taskIcon',
            path: '/images/phaser/taskIcon.png'
        }, {
            key: 'enchantIcon',
            path: '/images/phaser/enchantIcon.png'
        }], 'http://localhost:3001', this, (e) => {
            console.log(e);
        });
    }

    onClick() {
        /**
         * @summary 监听背包
         */
        this.knap.on('pointerdown', () => {
            this.events.emit('onKnapsack', '打开背包!');
        });
        
        /**
         * @summary 监听普通攻击
         */
        this.att.on('pointerdown', () => {
            this.events.emit('onAtt', '普通攻击!');
        });

        /**
         * @summary 监听对话
         */
        this.task.on('pointerdown', () => {
            this.events.emit('onTask', '对话!');
        })

        /**
         * @summary 监听回城
         */
        this.ret.on('pointerdown', () => {
            this.events.emit('onRet', '回城!');
        })

        /**
         * @summary 监听附魔
         */
        this.enchant.on('pointerdown', () => {
            this.events.emit('onEnchant', '附魔!');
        })
    }

}